<template>
  <div id="home">
    <div class="top-container">
      <md-icon name="home_my" class="home_my" @click="showDrawer"></md-icon>
      <div>{{title}}</div>
      <md-icon name="home_news_icon" class="home_news_icon" @click="openMailBox" v-if="unreadMessage?unreadMessage.unread_flag=='0':true"></md-icon>
      <md-icon name="xiaoxitz_icon" class="xiaoxitz_icon" @click="openMailBox" v-if="unreadMessage?unreadMessage.unread_flag=='1':false"></md-icon>
    </div>
    <div class="untreated_trip" v-show="MyAllotNumber!= ''">
      <p @click="goMyAllot">
        <img src="@/assets/imgs/snyc_zf_cw.png" />
        您有{{MyAllotNumber}}个未处理行程
      </p>
    </div>
    <md-tabs :titles="tabs" ref="tab" :default-index="defaultIndex" v-if="hasTaxi" @change="onTabChange">
      <chengji :key="1" ref="chengji"></chengji>
      <taxi :key="2" ref="taxi"></taxi>
    </md-tabs>
    <chengji v-if="!hasTaxi"></chengji>
    <md-landscape v-model="showPopupAdv" v-if="popup?true:false" :mask-closable="true">
      <img :src="popup[0]?popup[0].adv_banner:''" @click="gotoPopupAdvUrl" />
    </md-landscape>
    <md-popup class="popup" v-model="leftPopup.show" position="left">
      <div class="left-popup">
        <div class="user" @click="personal">
          <div class="user-photo">
            <img class="user-photos" :src="user_headpath" alt />
          </div>
          <div class="user-detail">
            <div class="user-name">{{nick_name}}</div>
            <div class="user-phone">{{currentUser.user_phone}}</div>
          </div>
          <div class="qrcode">
            <md-icon name="qrcode" size="lg"></md-icon>
          </div>
        </div>
        <div class="content">
          <md-field>
            <md-field-item class="popup-item" customized @click="onPopupItemClick(item)" :key="$index" v-for="(item,$index) in leftPopup.items">
              <md-icon :name="item.icon" slot="left" size="lg"></md-icon>
              <div class="popup-item-text" slot="default">{{item.title}}</div>
            </md-field-item>
          </md-field>
        </div>
        <!-- <div class="popup-bottom">
                            <div class="item">
                                <md-icon name="sjzm_icon"></md-icon>
                                <div>司机招募</div>
                            </div>
                            <div class="item">
                                <md-icon name="tjyj_icon"></md-icon>
                                <div>推荐有奖</div>
                            </div>
        </div>-->
      </div>
    </md-popup>
  </div>
</template>

<script>
import '@/assets/svgs/home_my.svg';
import '@/assets/svgs/home_news_icon.svg';
import '@/assets/svgs/cjyc_wf_icon.svg';
import '@/assets/svgs/qrcode.svg';
import '@/assets/svgs/grzx_wdxc_icon.svg';
import '@/assets/svgs/qianbao_icon.svg';
import '@/assets/svgs/youhui_icon.svg';
import '@/assets/svgs/grzx_sz_icon.svg';
import '@/assets/svgs/sjzm_icon.svg';
import '@/assets/svgs/tjyj_icon.svg';
import '@/assets/svgs/xiaoxitz_icon.svg';
import ChengJi from './ChengJi';
import Taxi from '@/views/taxi/Taxi';
import { mapGetters } from 'vuex';
import { GET_BANNERS, GET_POP_ADS, GET_RECOMMAND_ROUTES, GET_CURRENT_LOCATION } from '@/store/actions.types';
import { SET_START_CITY_OBJ, EXCHANGE_START_END, CONFIRM_ROUTE } from '@/store/mutations.types';
import { Icon, Button, Dialog, Popup, PopupTitleBar, Field, FieldItem, Landscape, Tabs } from 'mand-mobile';
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import http from '@/common/http';
import Loading from '@/components/loading';
import Utils from '@/common/pakjUtils';
import ScrolledNoticebar from '@/components/ScrolledNoticebar';
export default {
  name: 'Home',
  data() {
    return {
      MyAllotNumber: '',
      showTop: true,
      startCity: '',
      destCity: '',
      notice: '',
      title: '平安到家',
      tabs: ['城际出行', '出租车'],
      user_headpath: localStorage.getItem('user_headpath') || require('@/assets/imgs/dt_cktx_big.png'),
      nick_name: localStorage.getItem('nick_name'),
      is_identity: localStorage.getItem('is_identity'),
      showPopupAdv: false,
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 2500,
          disableOnInteraction: false
        }
      },
      leftPopup: {
        show: false,
        items: [
          {
            icon: 'grzx_wdxc_icon',
            title: '行程',
            to: 'MyAllot'
          },
          {
            icon: 'qianbao_icon',
            title: '钱包',
            to: 'MyWallet'
          },
          {
            icon: 'youhui_icon',
            title: '优惠',
            to: 'MyCoupon'
          },
          {
            icon: 'grzx_sz_icon',
            title: '设置',
            to: 'Options'
          }
        ]
      }
    };
  },
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Dialog.name]: Dialog,
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [Landscape.name]: Landscape,
    [Tabs.name]: Tabs,
    [ChengJi.name]: ChengJi,
    [Taxi.name]: Taxi
  },
  created() {
    this.goMyAllotNumber();
    // this.$store.commit('resetRoute');
    if (Utils.isWeixinBroswer()) {
      if (Utils.isMiniProgram()) {
        this.showTop = true;
      } else {
        this.showTop = false;
      }
    } else {
      this.showTop = true;
    }
    this.$store.dispatch('getUnreadMessageInfo');
    this.$store.dispatch(GET_BANNERS); // 主动调用获取BANNER广告接口
    this.$store.dispatch(GET_POP_ADS).then(() => {
      let popAdvShowed = sessionStorage.getItem('POPADV_SHOWED');
      if (!popAdvShowed && popAdvShowed !== '1') {
        if (this.popup.length > 0) {
          this.showPopupAdv = true;
          sessionStorage.setItem('POPADV_SHOWED', '1');
        }
      }
    }); // 获取压屏广告
    if (this.getCurrentLocation.provinceName && this.getCurrentLocation.provinceName !== '') {
      this.$store.dispatch(GET_RECOMMAND_ROUTES, {
        city: this.getCurrentLocation.provinceName
      });
      this.$store.dispatch('getHasTaxi', this.getCurrentLocation.provinceName);
    } else {
      this.$store.dispatch(GET_RECOMMAND_ROUTES);
    }
  },
  methods: {
    onTabChange(index, preindex) {
      if (index === 1) {
        this.$refs.taxi.init();
        this.$router.replace({
          name: 'homeTaxi'
        });
      } else if (index === 0) {
        this.$router.replace({
          name: 'Home'
        });
        this.$refs.taxi.doClear();
      }
    },
    goMyAllot() {
      this.$router.push({
        name: 'MyAllot'
      });
    },
    goMyAllotNumber() {
      Loading.show();
      http.post('pakj/passenger/getUseDoingOrder').then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          if (res.data.data.length === 1) {
            if (!sessionStorage['orederBack']) {
              sessionStorage['orederBack'] = '1';
              if (res.data.data[0].doing_type === '1') {
                // 城际
                window.location.href = '/orderdetail?orderno=' + res.data.data[0].doing_order_no;
              } else if (res.data.data[0].doing_type === '2') {
                // 出租车
                window.location.href = '/taxi/taxi?orderno=' + res.data.data[0].doing_order_no;
              } else if (res.data.data[0].doing_type === '3') {
                // 市内用车
                window.location.href = '/incity/detail?orderno=' + res.data.data[0].doing_order_no;
              }
            }
          }
          this.MyAllotNumber = res.data.data.length;
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    personal() {
      // 个人信息
      this.$router.push({
        name: 'PersonalIndex'
      });
    },
    showDrawer() {
      this.leftPopup.show = true;
    },
    openMailBox() {
      this.$router.push({
        name: 'Message'
      });
    },
    onPopupItemClick(item) {
      console.log(item.to);
      switch (item.to) {
        case 'MyAllot':
          this.$router.push({
            name: 'MyAllot'
          });
          break;
        case 'MyWallet':
          if (this.is_identity === '0') {
            Dialog.confirm({
              title: '实名认证',
              content: '您还没有实名认证，为了您的账户安全，请实名认证',
              confirmText: '去认证',
              onConfirm: () => {
                this.$router.push({
                  name: 'Authentication'
                });
              }
            });
          } else {
            this.$router.push({
              name: 'MyWallet'
            });
          }
          break;
        case 'MyCoupon':
          this.$router.push({
            name: 'MyCoupon'
          });
          break;
        case 'Options':
          this.$router.push({
            name: 'Options'
          });
          break;
      }
    },
    gotoPopupAdvUrl() {
      window.open(this.popup[0].url);
    }
  },
  computed: {
    ...mapGetters(['unreadMessage', 'currentUser', 'popup', 'hasTaxi', 'getCurrentLocation']),
    defaultIndex() {
      if (this.$route.name === 'home') {
        return 0;
      } else if (this.$route.name === 'homeTaxi') {
        return 1;
      }
    }
  },
  watch: {
    getCurrentLocation(newVal, oldVal) {
      if (newVal !== oldVal) {
        console.log('主界面：位置发生变化，重新查询推荐线路以及是否开通出租车');
        this.$store.dispatch(GET_RECOMMAND_ROUTES, {
          city: this.getCurrentLocation.provinceName
        });
        this.$store.dispatch('getHasTaxi', this.getCurrentLocation.provinceName);
      }
    }
  }
};
</script>

<style lang="stylus">
#home {
  background-color: color-primary-background;
  height: 100vh;

  p {
    display: block;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }

  .untreated_trip {
    position: absolute;
    top: 170px;
    width: 100%;
    background: rgba(51, 51, 51, 0.6);
    z-index: 99;
  }

  .untreated_trip p {
    text-align: center;
    font-size: 24px;
    color: #fff;
    height: 68px;
    line-height: 68px;
  }

  .untreated_trip p img {
    width: 32px;
    height: 32px;
    margin-right: 10px;
    position: relative;
    top: 6px;
  }

  .top-container {
    height: 80px;
    background-color: #F8F8F8;
    display: flex;
    -webkit-display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px 0 30px;

    .home_my {
      width: 28px;
      height: 32px;
    }

    .home_news_icon {
      width: 33px;
      height: 28px;
    }

    .xiaoxitz_icon {
      width: 42px;
      height: 36px;
      margin-right: -10px;
      margin-top: -10px;
    }
  }

  .md-tab-bar {
    background-color: #f8f8f8;
  }

  .left-popup {
    background-color: #fff;
    width: 540px;
    height: 100%;
    padding-left: 30px;
    padding-right: 30px;

    .user {
      height: 100px;
      display: flex;
      -webkit-display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding-top: 110px;
      padding-bottom: 70px;

      .user-photo {
        width: 100px;
        height: 100px;

        .user-photos {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      .user-detail {
        width: 350px;

        .user-name {
          font-size: 30px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .user-phone {
          font-size: 30px;
          color: color-text-caption;
          text-overflow: ellipsis;
        }
      }

      .qrcode {
        color: color-text-caption;
      }
    }

    .popup-item {
      .popup-item-text {
        font-size: 30px;
      }

      padding-left: 5px;
      padding-right: 5px;
    }

    .popup-bottom {
      display: flex;
      justify-content: center;
      left: 0px;
      bottom: 35px;
      position: absolute;
      width: 100%;
      height: 118px;

      .item {
        text-align: center;
        margin-left: 64px;
        margin-right: 64px;
        font-size: 24px;
      }

      .md-icon {
        width: 68px;
        height: 68px;
        margin-bottom: 16px;
      }
    }
  }
}
</style>
